<template>
  <div class="margin-container-list">
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table :data="shareLogList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column label="分享者(微客)" prop="shareName">
        </el-table-column>
        <el-table-column label="点击者" prop="readerName">
        </el-table-column>
        <el-table-column label="点击时间" prop="createTime">
        </el-table-column>
        <el-table-column label="累计阅读次数" prop="readNum">
        </el-table-column>
        <el-table-column label="获得酬金(元)">
          <template slot-scope="scope">
            <span style="color: red" v-if="scope.row.amount">+{{scope.row.amount}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="shareLogListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="shareLogListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<style scoped>
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { getNameByPath } from '@/utils/get-name-by-path' // 不要删除，根据URL获取文件名
  import { pagingShareLog } from '@/api/content/share'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    name: getNameByPath(),
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      contentId: {
        type: String
      },
      unitPrice: {
        type: String,
        default: 0
      }
    },
    data() {
      return {
        shareLogList: [],
        total: null,
        listLoading: true,
        multipleSelection: [],
        shareLogListQuery: {
          currentPage: 1,
          size: 10,
          type: 2,
          contentId: this.contentId
        }
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.initPage()
    },
    methods: {
      initPage() {
        this.listLoading = true
        pagingShareLog(this.shareLogListQuery).then(response => {
          if (response.isError) return
          this.shareLogList = response.data.records
          this.total = response.total
          this.listLoading = false
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.shareLogListQuery.ascs = 'createTime'
            this.shareLogListQuery.descs = ''
          } else {
            this.shareLogListQuery.ascs = ''
            this.shareLogListQuery.descs = 'createTime'
          }
        }
        this.initPage()
      },
      handleSearch() {
        this.searchReset()
        this.shareListQuery.currentPage = 1
        if (this.starEndTime) {
          if (this.starEndTime.length > 0) {
            this.shareLogListQuery.startDate = this.starEndTime[0]
            this.shareLogListQuery.endDate = this.starEndTime[1]
          }
        }
        this.initPage()
      },
      handleSizeChange(val) {
        this.shareLogListQuery.size = val
        this.initPage()
      },
      handleCurrentChange(val) {
        this.shareLogListQuery.currentPage = val
        this.initPage()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    },
    mounted() {

    }
  }
</script>
